<template>
 <div style="width: 100%;overflow-y: hidden;">
    <div v-if="!data.isMobile" style="height: 25px;"></div>
    <div v-if="!data.isMobile" style="width: 100%;border-radius: 5px;background-color: #eef7ff;padding: 16px 20px;line-height: 30px;margin-bottom: 20px;">
        <div style="width: 100%;text-align: center;">
            <a-input allow-clear v-model="searchForm.universityName" style="width: 60%;height: 40px;background-color: white;border: 0;margin-bottom: 10px;border-radius: 5px 0 0 5px;" placeholder="请输入院校名称"></a-input><a-button style="height: 40px;padding: 0 20px;border-radius: 0 5px 5px 0;" type="primary" :loading="isSearching" @click="
        this.searchForm.current=1;searchUniversities()">搜索</a-button>
        </div>
        <div>所在省</div>
        <a-radio-group v-model="searchForm.province">
            <a-radio v-bind:key="item" v-for="item in provinces" :value="item">{{ item==''?'不限':item }}</a-radio>
        </a-radio-group>
        <div>办学层次</div>
        <a-radio-group v-model="searchForm.level">
            <a-radio value="">不限</a-radio>
            <a-radio value="本科">本科</a-radio>
            <a-radio value="专科">专科</a-radio>
        </a-radio-group>
        <div>学校层次</div>
        <a-checkbox-group v-model="searchForm.focus">
            <a-checkbox value="C9">C9</a-checkbox>
            <a-checkbox value="985">985</a-checkbox>
            <a-checkbox value="211">211</a-checkbox>
            <a-checkbox value="省重点">省重点</a-checkbox>
        </a-checkbox-group>
    </div>
    <div v-if="!data.isMobile" style="width: 100%;position: relative;">
            <div style="width: calc(100% - 320px);display: inline-block;float: right;">
                <div style="line-height: 30px;margin-bottom: 20px;">
                    搜索结果
                </div>

                <div class="university-item" v-bind:key="item" v-for="item in universities" style="border-radius: 5px;border: 1px solid rgb(230,230,230);padding: 20px 20px;margin-bottom: 20px;position: relative;" @click="showUniversityIntroductionPage(item.name)">
                    <div style="font-size: 20px;font-weight: bold;">
                        <span>
                            {{ item.name }}
                        </span>
                        <span style="font-size: 12px;font-weight: normal;padding: 2px 2px;background-color: rgb(242,242,242);border-radius: 3px;margin-left: 15px;">
                            {{ item.province + " " + item.city + " " + item.cityLevel }}
                        </span>
                    </div>
                    <div style="font-size: 14px;margin-top: 15px;">
                        <span v-if="item.public!=''" style="margin-right: 10px;">{{ item.public }}</span>
                        <span v-if="item.type!=''" style="margin-right: 10px;">{{ item.type }}</span>
                        <span v-if="item.focus!=''" style="margin-right: 10px;">{{ item.focus=="985211"?"985,211":item.focus }}</span>
                        <span v-if="item.firstRate!=''" style="margin-right: 10px;">{{ item.firstRate }}</span>
                    </div>
                    <div  v-if="item.minScore!=0 && item.minRanking!=0" style="font-size: 16px;color: rgb(0, 58, 0);background-color: rgb(217, 255, 217);border-radius: 3px;padding: 5px 5px;position: absolute;right: 20px;top: 20px;">
                        最低分/最低位次：{{ item.minScore + "/" + item.minRanking }}
                    </div>
                </div>

                <div v-if="universities.length!=0"  style="text-align: right;">
                    <a-button :disabled="searchForm.current==1 || isSearching" style="margin-right: 10px;" @click="()=>{searchForm.current=1;
                        searchUniversities();
                    }">首页</a-button>
                    <a-button :disabled="searchForm.current==1 || isSearching" @click="()=>{searchForm.current--;
                        searchUniversities();
                    }">上一页</a-button>
                    <a-button style="background-color: white;">{{ searchForm.current + "/" + searchForm.total }}</a-button>
                    <a-button :disabled="searchForm.current==searchForm.total || isSearching" @click="()=>{searchForm.current++;searchUniversities();}">下一页</a-button>
                    <a-button :disabled="searchForm.current==searchForm.total || isSearching" style="margin-left: 10px;" @click="()=>{searchForm.current=searchForm.total;searchUniversities();}">末页</a-button>
                </div>

                <div style="width: 100%;height: 120px;">

                </div>
            </div>
            <div style="width: 300px;display: inline-block;position: absolute;left: 0;top: 0;">
                <userInfoSection2 :user-info="data.loginedUserInfo"></userInfoSection2>
                <div style="width: 100%;border-radius: 5px;margin-bottom: 20px;">
                    <div>
                        <div class="menu-item" @click="changePage(4)">
                            我收藏的院校
                            <svg style="position: absolute;right: 11.38px;top: 11.38px;" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
                        </div>
                    </div>
                </div>
               <div v-if="data.news.length!=0" style="width: 100%;border-radius: 5px;border: 1px solid rgb(230,230,230);padding: 20px 20px;">
                
            <div style="line-height: 30px;">
                高考资讯
            </div>
            <div style="padding: 20px 0;position: relative;" v-bind:key="item" v-for="item in data.news" @click="openLink('https://www.sdjyxww.com/' + item.url)">
                <div style="display: inline-block;width: 30px;line-height: 100%;font-size: 16px;margin-top: 5px;">
                    {{ item.order }}
                </div>
                <div style="display: inline-block;float: right;width: calc(100% - 30px);line-height: 20px;cursor: pointer;">
                    {{ item.title }}
                </div>
            </div>
        </div> 
                <div style="width: 100%;height: 120px;">

                </div>
            </div>
            
    </div>
    <div v-if="data.isMobile" style="width: 100%;">
        <div style="width: 100%;padding: 20px 20px;padding-bottom: 10px;">
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 22px;font-weight: bold;">院校查询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(3)">专业查询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(4)">收藏夹</span>
        </div>
        <div style="width: 100%;height: calc(100vh - 55.29px - 55px);overflow-y: scroll;padding: 10px 10px;line-height: 20px;padding-bottom: 100px;">
            <div>
                <div style="width: 100%;text-align: center;">
            <a-input allow-clear v-model="searchForm.universityName" :style="{width:isSearching?'calc(100% - 92px)':'calc(100% - 70px)'}" style="height: 40px;background-color: white;border: 0;margin-bottom: 10px;border-radius: 5px 0 0 5px;border: 1px solid rgb(230,230,230);border-right: 0;" placeholder="请输入院校名称"></a-input><a-button style="height: 40px;padding: 0 20px;border-radius: 0 5px 5px 0;" type="primary" :loading="isSearching" @click="
        this.searchForm.current=1;searchUniversities()">搜索</a-button>
        </div>
        <div style="width: 100%;padding: 10px 10px;border: 1px solid rgb(230,230,230);border-radius: 5px;margin-bottom: 10px;">
        <div>所在省</div>
        <a-radio-group v-model="searchForm.province">
            <a-radio v-bind:key="item" v-for="item in provinces" :value="item">{{ item==''?'不限':item }}</a-radio>
        </a-radio-group>
        </div>
        
        <div style="width: 100%;padding: 10px 10px;border: 1px solid rgb(230,230,230);border-radius: 5px;margin-bottom: 10px;"><div>办学层次</div>
        <a-radio-group v-model="searchForm.level">
            <a-radio value="">不限</a-radio>
            <a-radio value="本科">本科</a-radio>
            <a-radio value="专科">专科</a-radio>
        </a-radio-group></div>
        <div style="width: 100%;padding: 10px 10px;border: 1px solid rgb(230,230,230);border-radius: 5px;margin-bottom: 10px;"><div>学校层次</div>
        <a-checkbox-group v-model="searchForm.focus">
            <a-checkbox value="C9">C9</a-checkbox>
            <a-checkbox value="985">985</a-checkbox>
            <a-checkbox value="211">211</a-checkbox>
            <a-checkbox value="省重点">省重点</a-checkbox>
        </a-checkbox-group></div>
        
            </div>
            <div>
                搜索结果
                <div class="university-item" v-bind:key="item" v-for="item in universities" style="border-radius: 5px;border: 1px solid rgb(230,230,230);padding: 10px 10px;margin-bottom: 0px;position: relative;margin-top: 10px;" @click="showUniversityIntroductionPage(item.name)">
                    <div style="font-size: 16px;font-weight: bold;">
                        <span>
                            {{ item.name }}
                        </span>
                        <span style="font-size: 12px;font-weight: normal;padding: 2px 2px;background-color: rgb(242,242,242);border-radius: 3px;margin-left: 15px;">
                            {{ item.province + " " + item.city + " " + item.cityLevel }}
                        </span>
                    </div>
                    <div style="font-size: 14px;margin-top: 5px;">
                        <span v-if="item.public!=''" style="margin-right: 10px;">{{ item.public }}</span>
                        <span v-if="item.type!=''" style="margin-right: 10px;">{{ item.type }}</span>
                        <span v-if="item.focus!=''" style="margin-right: 10px;">{{ item.focus=="985211"?"985,211":item.focus }}</span>
                        <span v-if="item.firstRate!=''" style="margin-right: 10px;">{{ item.firstRate }}</span>
                    </div>
                    <div v-if="item.minScore!=0 && item.minRanking!=0" style="font-size: 14px;color: rgb(0, 128, 0);border-radius: 3px;position: unset;right: 20px;top: 20px;margin-top: 5px;">
                        最低分/最低位次：{{ item.minScore + "/" + item.minRanking }}
                    </div>
                </div>

                <div v-if="universities.length!=0" style="text-align: right;margin-top: 10px;font-size: 12px !important;">
                    <a-button :disabled="searchForm.current==1 || isSearching" style="margin-right: 10px;padding: 0 5px;" @click="()=>{searchForm.current=1;
                        searchUniversities();
                    }">首页</a-button>
                    <a-button :disabled="searchForm.current==1 || isSearching" style="padding: 0 5px;" @click="()=>{searchForm.current--;
                        searchUniversities();
                    }">上一页</a-button>
                    <a-button style="background-color: white;padding: 0 5px;">{{ searchForm.current + "/" + searchForm.total }}</a-button>
                    <a-button :disabled="searchForm.current==searchForm.total || isSearching" style="padding: 0 5px;" @click="()=>{searchForm.current++;searchUniversities();}">下一页</a-button>
                    <a-button :disabled="searchForm.current==searchForm.total || isSearching" style="margin-left: 10px;padding: 0 5px;" @click="()=>{searchForm.current=searchForm.total;searchUniversities();}">末页</a-button>
                </div>
            </div>
        </div>
    </div>
 </div>
</template>

<script>
import axios from 'axios';
import userInfoSection2 from '@/components/userInfoSection2.vue';

export default{
    components:{
        userInfoSection2
    },
  data(){
    return{
      provinces:['','河北','山西','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','台湾','江西','山东','河南','湖北','湖南','广东','海南','四川','贵州','云南','陕西','甘肃','青海','北京','天津','上海','重庆','内蒙古','广西','西藏','宁夏','新疆','香港','澳门'],
      searchForm:{
        province:'',
        level:'',
        focus:[],
        universityName:'',
        start:0,
        size:20,
        total:0,
        current:1,
      },
      universities:[],
      isSearching:false,
    }
  },
  mounted(){
    this.searchUniversities();
  },
  methods:{
    searchUniversities(){
        this.isSearching=true;
        this.searchForm.start=this.searchForm.current*20-20;
        this.searchForm['account'] = this.data.loginedUserInfo==undefined?'':this.data.loginedUserInfo.account;
        var config = {
   method: 'get',
   url: '/api/v1/universities/userSearch?data=' + JSON.stringify(this.searchForm),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
    this.isSearching=false;
   if(res.data.status==1){
    this.universities=res.data.results
    this.searchForm.total=parseInt(res.data.total/this.searchForm.size) + ((parseInt(res.data.total/this.searchForm.size)!=res.data.total/this.searchForm.size)?1:0);
   }else if(res.data.status==-7){
    if(this.data.loginedUserInfo==undefined){
        this.changePage(7);
    }else{
        this.searchForm.current=1;
        this.showBuyVIPWarningForm();
    }
   }else{
    this.$message.error({
        content:'搜索失败'
    })
   }
})
    },
    openLink(url){
        window.open(url);
    }
  },
  props:{
    data:undefined,
    showUniversityIntroductionPage:undefined,
    changePage:undefined,
    showBuyVIPWarningForm:undefined
  },
}
</script>

<style scoped>

.menu-item:hover{
    background-color: rgb(0,110,205);
}

.menu-item{
    width: 100%;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(0,120,215);
    color: white;
    position: relative;
}

.university-item:active{
    scale: 0.99;
}

.university-item{
    transition: all .1s;
}

.university-item:hover{
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

</style>